<template>
  <div class="notice">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">{{notice}}</div>
        <!-- <div class="swiper-slide">2020年我们值得骄傲！2021年我们会更好！</div>
        <div class="swiper-slide">中大门国际物流在“2020中国经济高峰论坛”获两项殊荣！</div> -->
      </div>
      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!--    <div class="swiper-scrollbar"></div>-->
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper'
  export default {
    name: 'notice',
    components: {

    },
    data() {
      return {
        notice: '买全球 卖全球 通全球'
      }
    },
    mounted() {
      new Swiper('.swiper-container', {
        loop: true,
        // 如果需要分页器
        // pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
        //如果需要自动切换海报
        // autoplay: true,
        // speed: 3000
      })
    },
    methods: {}
  }
</script>

<style scoped>
  .notice,
  .notice .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-container .swiper-slide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .16rem;
    font-weight: bold;
    color: #fff;
    /* display: flex;
  align-items:flex-start;
  justify-content: center; */
    background-image: -webkit-linear-gradient(top, #ffffff, #fef102, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: .26rem;
  }
</style>
